<!-- 小程序banner配置 -->

<template>
  <page-header-wrapper>
    <a-card class="table-card">
      <gz-official-account-list v-model:value="officialAccount" :appId="useRoute().query.appId" :type="1">
        <GzSearchForm
          :searchFunc="getList"
          :resetFunc="
            () => {
              vdata.queryParams = {
                appId:vdata.queryParams.appId, pageNum: 1,pageSize: 10,
              };
            }
          "
          searchConditionNum="6"
        >
          <!-- <a-form-item class="table-search-item">
            <a-select
              v-model:value="vdata.queryParams.appId"
              placeholder="请选择小程序"
              :options="vdata.appList"
            >
            </a-select>
          </a-form-item> -->
          <GzTextUp
            v-model:value="vdata.queryParams.swiperName"
            placeholder="请输入Banner名称"
          />
          <!-- <a-form-item>
        <GzDateRangePicker v-model="queryParams.onLineTimeScope"></GzDateRangePicker>
      </a-form-item> -->
          <a-form-item class="table-search-item">
            <a-select
              v-model:value="vdata.queryParams.state"
              placeholder="配置状态"
              clearable
            >
              <a-select-option value="">全部</a-select-option>
              <a-select-option :value="0">上线</a-select-option>
              <a-select-option :value="1">下线</a-select-option>
            </a-select>
          </a-form-item>
        </GzSearchForm>
        <!-- 列表渲染 -->
        <div class="table-content">
          <a-skeleton :paragraph="{ rows: 4 }" active :loading="vdata.loading">
            <a-row>
              <a-button
                v-if="$access('ENT_LITE_BANNER_INFO_ADD')"
                style="margin-bottom: 20px"
                type="primary"
                @click="handleAddOrUpdate(undefined)"
              >
                新增
              </a-button>
            </a-row>
            <a-row>
              <a-col
                v-for="(item, index) in vdata.list"
                :key="index"
                :span="5"
                :offset="index % 4 != 0 ? 1 : 0"
                style="padding-bottom: 30px"
              >
                <a-card hoverable :headStyle="{ padding: 10 }">
                  <template #cover>
                    <div class="image-container">
                      <a-image
                        class="image"
                        :src="item.url"
                        width="100%"
                        height="160px"
                      />
                      <span class="banner-order">轮播序号：{{ item.sort }}</span>
                    </div>
                  </template>
                  <a-card-meta :title="item.swiperName" style="margin: 15px">
                    <template #description>
                      上线时间：{{ item.startTime ? item.startTime.slice(0,10) : "--" }}
                      <br>
                      下线时间：{{ item.endTime ? item.endTime.slice(0,10) : "--" }}
                    </template>
                  </a-card-meta>

                  <template #actions>
                    <a-button
                      v-if="$access('ENT_LITE_BANNER_INFO_EDIT') && item.state === 1"
                      type="text"
                      @click="handlePutOrRemove(item, true)"
                    >
                      上线
                    </a-button>
                    <a-button
                      v-if="$access('ENT_LITE_BANNER_INFO_EDIT') && item.state === 0"
                      type="text"
                      @click="handlePutOrRemove(item, false)"
                    >
                      下线
                    </a-button>
                    <a-button
                      v-if="$access('ENT_LITE_BANNER_INFO_VIEW') && item.state === 0"
                      type="text"
                      @click="handleView(item.bannerId)"
                    >
                      查看
                    </a-button>
                    <a-button
                      v-if="$access('ENT_LITE_BANNER_INFO_EDIT') && item.state === 1"
                      type="text"
                      @click="handleAddOrUpdate(item.bannerId)"
                    >
                      修改
                    </a-button>
                    <a-button
                      v-if="$access('ENT_LITE_BANNER_INFO_DEL') && item.state === 1"
                      type="text"
                      danger
                      @click="handleDelete(item)"
                    >
                      删除
                    </a-button>
                  </template>
                </a-card>
              </a-col>
            </a-row>
            <a-empty
              v-if="!vdata.loading && vdata.total === 0"
              description="空空如也"
            />
          </a-skeleton>
        </div>
      </gz-official-account-list>

      <a-pagination
        v-show="vdata.total > 0"
        v-model:current="vdata.queryParams.pageNum"
        v-model:pageSize="vdata.queryParams.pageSize"
        style="
          display: flex;
          justify-content: flex-end;
          margin-right: 30px;
          margin-bottom: 30px;
        "
        :total="vdata.total"
        show-less-items
        @change="getList"
      />
    </a-card>

    <AddOrEdit ref="addOrEditRef" :appId="vdata.queryParams.appId" @callback="getList()" />
    <Detail ref="detailRef" />
  </page-header-wrapper>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, getCurrentInstance,watch } from 'vue'
import { useRoute } from 'vue-router'
import AddOrEdit from './AddOrEdit.vue'
import Detail from './Detail.vue'
import { $listBanner, $onOrOffBanner, $deleteBanner } from '@/api/proxy/programManage/liteBanner/index'
const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties

const addOrEditRef = ref()
const detailRef = ref()

const vdata: any = reactive({
  currentDate: new Date(),
  // 遮罩层
  loading: false,
  // 显示搜索条件
  showSearch: true,
  // 总条数
  total: 10,
  // 选择的小程序
  applet:'',
  list: [],
  // 查询参数
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    swiperName: undefined,
    // onLineTimeScope: undefined,
    state: undefined,
    appId: undefined,
  },
  appList: [], // 小程序列表
})

const officialAccount = ref(null)
let appid = useRoute().query.appId
/**
 * 监听公众号变化
 */
// if(useRoute().query.appId){
//   vdata.queryParams.appId = useRoute().query.appId;
//   getList();
//   console.log('跳转到该页面',useRoute().query.appId)
// }else{
 
  watch(()=>officialAccount.value, (newVal, oldVal) => {
  vdata.queryParams.appId = newVal.appId
  getList()
  if(!oldVal) return
})
// }
// watch(()=>officialAccount.value, (newVal, oldVal) => {
//   console.log('监听公众号变化',newVal.appId,oldVal)
//   vdata.queryParams.appId = newVal.appId
//   getList()
//   if(!oldVal) return
// })
onMounted(() => {
  // vdata.queryParams.appId = useRoute().query.appId;
  // getList();
  // getAppList();
})
/** 获取小程序列表 */
// function getAppList() {
//   req.add(API_URL_OFFICIAL_LIST, { type: 1 }).then((res) => {
//     vdata.appList = res.map((item) => ({
//       label: item.name,
//       value: item.appId,
//     }));
//   });
// }
/** 查询列表 */
function getList() {
  vdata.loading = true
  $listBanner(vdata.queryParams)
    .then((response) => {
      vdata.list = response.records
      vdata.total = response.total
    })
    .finally(() => {
      vdata.loading = false
    })
}

/** 修改/新增按钮操作 */
function handleAddOrUpdate(row) {
  addOrEditRef.value.show(row, vdata.appList)
}

/** 查看按钮操作 */
function handleView(row) {
  detailRef.value.show(row)
}

/** 上下线按钮操作 */
function handlePutOrRemove(row, isPut) {
  var tipMsg
  if (isPut) {
    tipMsg = '上线'
  } else {
    tipMsg = '下线'
  }
  $infoBox.confirmDanger(
    '',
    '是否' + tipMsg + 'Banner名称为"' + row.swiperName + '"的数据项？',
    () => {
      $onOrOffBanner({bannerId:row.bannerId,state:isPut ? 0 : 1}).then((res) => {
        $infoBox.message.success(tipMsg + '成功')
        getList()
      })
    }
  )
}

/** 删除 */
function handleDelete(row) {
  $infoBox.confirmDanger(
    '重要提示',
    '是否删除Banner名称为"' + row.swiperName + '"的数据项？',
    () => {
      $deleteBanner({bannerId:row.bannerId}).then((res) => {
        $infoBox.message.success('删除成功')
        getList()
      })
    }
  )
}
</script>

<style lang="less" scoped>
.table-content {
  padding: 30px 30px 10px 30px;
}

.handle {
  display: flex;
  justify-content: flex-end;

  .button {
    padding: 0;
  }
}

.image-container {
  position: relative;
  width: 100%;

  .banner-order {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #f2f2f2;
    font-size: 13px;
    z-index: 10;
    padding: 5px;
  }

  .image {
    position: absolute;
    width: 100%;
    height: 100%;
  }
}
</style>
